<script setup lang="ts">
import { ref, onMounted } from "vue";
import { capitalCity,bigCity } from "@/api";
// import { ElMessage } from "element-plus"
import Gauge from '@/components/gauge/index.vue';


const num1 = ref(0);
const num2 = ref(0);

const getData = () =>{
  Promise.all([capitalCity(),bigCity()])
  .then((res) => {
    num1.value = res[0].data;
    num2.value = res[1].data;
  })
  .catch((err) => {
    console.log(err);
  });
}

onMounted(() => {
  getData()
});

</script>

<template>
  <div class="flex justify-between h-full">
    <Gauge :value="num1" title="全国省会城市网格覆盖率(%)"/>
    <Gauge :value="num2" title="全国大城市网格覆盖率(%)"/>
  </div>
</template>

<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}
</style>
